<template>
  <div class="widget-form-container">
    <a-form :layout="widgetForm.config.layout" :labelAlign="widgetForm.config.labelAlign"
      :labelCol="widgetForm.config.labelCol" :hideRequiredMark="widgetForm.config.hideRequiredMark">
      <draggable :list="widgetForm.list" :group="{ name: 'widget' }" class="widget-form-list" item-key="key"
        @add="handleAdd" handle=".widget-view" :animation="200" ghostClass="ghost" @end="handleQuestionDragEnd">
        <template #item="{ element, index }">

          <transition-group name="list" tag="div">
            <AntdWidgetFormItem v-if="element.key" :key="element.key" :element="element" :config="widgetForm.config"
              :selectWidget="widgetFormSelect" @click="handleItemClick(element)"
              @copy="handleCopyClick(index, widgetForm.list)" @delete="handleDeleteClick(index, widgetForm.list)" />
          </transition-group>

        </template>

      </draggable>
    </a-form>
  </div>
</template>

<script setup lang="ts">

import { ref, watch, nextTick } from 'vue'
import draggable from "vuedraggable";
import AntdWidgetFormItem from '../questionare/AntdWidgetFormItem.vue';
import { v4 } from 'uuid';
import type { WidgetForm } from './config/antd';


// 声明双向绑定的 model
const widgetForm = defineModel<WidgetForm>('widgetForm', { required: true });
const widgetFormSelect = defineModel<Record<string, any> | undefined>('widgetFormSelect');

// 初始化本地列表（修正为 widgetForm.value.list）
const localList = ref([...widgetForm.value.list]);

// 监听父组件 widgetForm.list 变化，同步到本地（恢复注释的 watch）
watch(
  () => widgetForm.value.list,
  (newList) => {
    localList.value = [...newList];
  },
  { deep: true }
);


// 处理拖拽添加事件
function handleAdd(e: any) {
  console.log('handleAdd', e);

  // 1. 从拖拽事件中获取拖入的原始元素数据（e.item 是拖入的源数据）
  const { newIndex } = e
  const type = e.item.__draggable_context.element.type
  console.log('类型', type);


  // 2. 生成新元素（基于拖入的原始数据，补充唯一标识和必要属性）
  const key = v4().replace(/-/g, ''); // 生成无横线的唯一 key
  // const newElement = {
  //   ...draggedItem, // 继承拖入元素的基础属性（如 type、label 等）
  //   key, // 补充唯一标识（用于列表渲染的 key）
  //   model: `${draggedItem.type}_${key}`, // 生成唯一 model 字段
  //   rules: [], // 初始化校验规则
  //   // 如需其他默认属性（如 config），可在此补充
  // };
  console.log('生成key');
  // 获取当前列表 （深拷贝 避免直接修改原数据）
  const list = JSON.parse(JSON.stringify(widgetForm.value.list));
  console.log('深拷贝list', list);
  // 计算新元素的sort值
  // 找出当前列表中最大的sort值
  const maxSort = list.length > 0 ? Math.max(...list.map((item:any) => item.sort || 0)) : 0

  // 新元素的sort 等于最大sort + 10 间隔10
  //如果列表为空，那么从10 开始
  const newSort = list.length === 0 ? 10 : maxSort + 10
  list[newIndex] = {
    ...list[newIndex],
    key,
    model: `${type}_${key}`,
    rules: [],
    sort: newSort   // 初始化sort值
  }
  console.log('生成list[newIndex]');



  // 注意：widgetForm 是 defineModel 返回的 Ref，修改其 .value 会自动触发父组件更新
  widgetForm.value = {
    ...widgetForm.value, // 保留原有其他属性（如 config）
    list // 同步本地列表到双向绑定
  };

  // 5. 更新选中状态（可选）
  widgetFormSelect.value = list[newIndex];
  console.log('handleAdd', list[newIndex]);
  console.log('新元素sort已具备')

}

// 补充复制/删除逻辑（示例）

const handleCopyClick = (index: number, list: any[]) => {
  const key = v4().replace('-', '')
  const oldList = JSON.parse(JSON.stringify(widgetForm.value.list))

  let copyData = {
    ...list[index],
    key,
    model: `${list[index].type}_${key}`,
    rules: list[index].rules ?? []
  }

  if (
    list[index].type === 'radio' ||
    list[index].type === 'checkbox' ||
    list[index].type === 'select'
  ) {
    copyData = {
      ...copyData,
      options: {
        ...copyData.options,
        options: copyData.options.options.map((item: any) => ({ ...item }))
      }
    }
  }

  widgetForm.value = { ...widgetForm.value, list: handleListInsert(list[index].key, oldList, copyData) }
}
const handleListInsert = (key: string, list: any[], obj: any) => {
  const newList: any[] = []
  list.forEach(item => {
    if (item.key === key) {
      newList.push(item)
      newList.push(obj)
    } else {
      if (item.columns) {
        item.columns = item.columns.map((col: any) => ({
          ...col,
          list: handleListInsert(key, col.list, obj)
        }))
      }
      newList.push(item)
    }
  })
  return newList
}

// 删除表单项的处理函数（移除 context.emit）
const handleDeleteClick = (index: number, list: any[]) => {
  // 深拷贝当前列表（用于后续计算）
  const oldList = JSON.parse(JSON.stringify(widgetForm.value.list));

  // 1. 更新选中项（widgetFormSelect）
  if (list.length - 1 === index) {
    // 若删除的是最后一项
    if (index === 0) {
      // 列表清空，选中项设为 null
      nextTick(() => {
        widgetFormSelect.value = undefined; // 替代 emit('update:widgetFormSelect', null)
      });
    } else {
      // 选中前一项
      widgetFormSelect.value = list[index - 1]; // 替代 emi
    }
  } else {
    // 若删除的不是最后一项，选中后一项
    widgetFormSelect.value = list[index + 1]; // 替代 emit('update:widgetFormSelect', list[index + 1])
  }

  // 2. 更新列表数据（widgetForm）
  // 调用删除逻辑（假设 handleListDelete 是删除指定 key 项的工具函数）
  const newList = handleListDelete(list[index].key, oldList);
  widgetForm.value = {
    ...widgetForm.value, // 保留其他属性（如 config）
    list: newList // 更新列表
  }; // 替代 emit('update:widgetForm', ...)
};

const handleListDelete = (key: string, list: any[]) => {
  const newList: any[] = []
  list.forEach(item => {
    if (item.key !== key) {
      if (item.columns) {
        item.columns = item.columns.map((col: any) => ({
          ...col,
          list: handleListDelete(key, col.list)
        }))
      }
      newList.push(item)
    }
  })
  return newList
}

// 处理 拖拽修改题目sort属性
const handleQuestionDragEnd = (e:any) => {
  const {  oldIndex } = e
  const draggedQuestion = widgetForm.value.list[oldIndex];
  console.log('被拖拽的题目：', draggedQuestion);

  widgetForm.value.list.forEach((question, index) => {
    question.sort = (index + 1) * 10;
  });
}


const handleItemClick = (element: any) => {
  widgetFormSelect.value = element;
};
</script>
<style>
.widget-form-container {
  /* background: #000; */
  height: 100vh;
  position: relative;
}

.widget-form-list {
  height: 100vh;

}
</style>